import styles from './RowBarChart.module.scss'
import {getMoney} from '@/utils/money'
export default function RowBarChart(props:{
  data: any[]
}) {
  return <div className={styles.rowBarChartWrap}>
    <ul>
      {
        props.data.map((row, rIndex) => {
          return <li key={rIndex}>
            <div className={styles.tag}>{row.tag.sign}</div>
            <section className={styles.msgBar}>
              <div className={styles.topMsg}>
                <span className={styles.tagName}>{row.tag.name}<span className={styles.percent}>{row.percent}%</span></span>
                <span>¥{getMoney(row.amount)}</span>
              </div>
              <div className={styles.barWrap}>
                <div className={styles.barInner} style={{width: `${row.percent}%`}}></div>
              </div>
            </section>
          </li>
        })
      }
    </ul>
  </div>
}